var template = `
<div class="form">
    <div class="prop" v-if="Object.keys(data).length > 0 && Object.keys(showModel).length > 0">
        <div v-for="key in Object.keys(showModel)">
            <div class="label"><label>{{doGetKey(key)}}:</label></div>
            <div class="input">
                <div v-if="showModel[key] && 'boolean' === showModel[key].type">
                    <input type="radio" value="true" v-model="data[key]">
                    <label>true</label>
                    <input type="radio" value="false" v-model="data[key]">
                    <label>false</label>
                </div>
                <div v-else-if="showModel[key] && 'map' === showModel[key].type">
                    <div class="map" v-for="(mValue,mKey,index) in data[key]">
                        <input class="key" type="text" :value="mKey" @input="changeKey(key,index,mKey,$event.target.value)">
                        <label> : </label>
                        <input class="value" type="text" :value="mValue" @input="changeValue(key,index,mValue,$event.target.value)">
                        <button class="del" @click="changeRemove(key,index)">-</button>
                    </div>
                    <button class="add" @click="changeAdd(key)">+</button>
                </div>
                <div v-else-if="showModel[key] && 'textarea' === showModel[key].type">
                    <div class='textarea'>
                        <textarea wrap="off" v-model="data[key]"></textarea>
                    </div>
                </div>
                <input v-else type="text" v-model="data[key]"/>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="no-data" v-else>没有模型</div>
    <div class="buttons">
        <button @click="submit">提交</button>
        <button @click="cancel">取消</button>
        <div style="clear:both;"></div>
    </div>

</div>
`;


let Form = {
    name: 'Form',
    components: {},
    template,
    props: {
        data: {
            type: Object,
            default: {}
        },
        edit: {
            type: Object,
            default: {}
        },
        showModel: {
            type: Object,
            default: {}
        },
        schema: {
            type: String,
            default: ''
        },
    },
    methods: {
        submit() {
            this.$emit('submit')
        },
        cancel() {
            this.$emit('cancel')
        },
        changeKey(key, index, oldVal, newVal) {
            let map = this.data[key];
            let listElement = Object.keys(map).map(k => [k, map[k]]);
            listElement[index][0] = newVal;
            let newObj = {};
            listElement.forEach(arr => newObj[arr[0]] = arr[1]);
            this.data[key] = newObj;
        },
        changeValue(key, index, oldVal, newVal) {
            let map = this.data[key];
            let listElement = Object.keys(map).map(k => [k, map[k]]);
            listElement[index][1] = newVal;
            let newObj = {};
            listElement.forEach(arr => newObj[arr[0]] = arr[1]);
            this.data[key] = newObj;
        },
        changeRemove(key, index) {
            console.log('changeRemove');
            let map = this.data[key];
            let listElement = Object.keys(map).map(k => [k, map[k]]);
            let newObj = {};
            listElement.forEach((arr, ind) => {
                if (index !== ind) {
                    newObj[arr[0]] = arr[1];
                }
            });
            this.data[key] = newObj;
        },
        changeAdd(key) {
            let map = this.data[key];
            map[''] = '';
        },
        doGetKey(key = '') {
            let {apiDocs} = this.sharedState;
            if (apiDocs) {
                let {schemas = {}} = apiDocs.components;
                let schemaObj = schemas[this.schema];
                if (schemaObj) {
                    return schemaObj.properties && schemaObj.properties[key] && schemaObj.properties[key].description || key;
                }
            }
            return key;
        },
    },
    data() {
        return {
            sharedState: store.state,
        }
    },
};